<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布商品 - 北大跳蚤市场</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/publish.css">
    <link rel="stylesheet" href="/components/navbar.css">
</head>
<body>
    <!-- 插入导航栏 -->
    <div id="navbar-container"></div>
    <!-- 导航栏 -->
    <!-- <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="/">
                <i class="bi bi-shop"></i> 校内跳蚤市场
            </a>
        </div>
    </nav> -->

    <!-- 发布商品主体 -->
    <div class="publish-container">
        <!-- 头部信息 -->
        <div class="publish-header">
            <h4><i class="bi bi-camera me-2"></i>发布新商品</h4>
            <p class="mb-0">填写商品信息，快速上架您的二手物品</p>
        </div>
        
        <!-- 商品图片上传 -->
        <div class="publish-section">
            <h5 class="section-title">
                <i class="bi bi-images"></i> 商品图片
            </h5>
            
            <div class="image-upload-area" id="imageUploadArea">
                <i class="bi bi-cloud-arrow-up" style="font-size: 2rem; color: var(--primary-color);"></i>
                <h5 class="mt-2">拖放图片到此处或点击上传</h5>
                <p class="text-muted">支持JPG/PNG格式，最多5张图片</p>
                <input type="file" id="imageUpload" accept="image/*" multiple class="d-none">
            </div>
            
            <div class="image-preview-container" id="imagePreviewContainer">
                <!-- 图片预览将在这里动态生成 -->
            </div>
        </div>
        
        <!-- 商品基本信息 -->
        <div class="publish-section">
            <h5 class="section-title">
                <i class="bi bi-info-circle"></i> 基本信息
            </h5>
            
            <div class="mb-3">
                <label for="itemTitle" class="form-label">商品标题</label>
                <input type="text" class="form-control" id="itemTitle" placeholder="例如：九成新Web前端开发教材">
                <div class="character-count"><span id="titleCount">0</span>/50</div>
            </div>
            
            <div class="mb-3">
                <label for="itemCategory" class="form-label">商品类别</label>
                <select class="form-select" id="itemCategory">
                    <option selected disabled value="">选择商品类别</option>
                    <option value="books">教材图书</option>
                    <option value="electronics">电子产品</option>
                    <option value="clothes">服装服饰</option>
                    <option value="daily">生活用品</option>
                    <option value="others">其他</option>
                </select>
            </div>
            
            <div class="mb-3">
                <label for="itemPrice" class="form-label">价格 (元)</label>
                <div class="input-group price-input">
                    <input type="number" class="form-control" id="itemPrice" min="0" step="0.01" placeholder="0.00">
                    <span class="input-group-text">¥</span>
                </div>
            </div>
            
            <div class="mb-3">
                <label for="itemCondition" class="form-label">商品成色</label>
                <select class="form-select" id="itemCondition">
                    <option selected disabled value="">选择商品成色</option>
                    <option value="new">全新</option>
                    <option value="likeNew">几乎全新</option>
                    <option value="good">良好</option>
                    <option value="fair">一般</option>
                    <option value="poor">较差</option>
                </select>
            </div>
        </div>
        
        <!-- 商品描述 -->
        <div class="publish-section">
            <h5 class="section-title">
                <i class="bi bi-card-text"></i> 商品描述
            </h5>
            
            <div class="mb-3">
                <label for="itemDescription" class="form-label">详细描述</label>
                <textarea class="form-control" id="itemDescription" rows="5" placeholder="请详细描述您的商品，包括使用情况、瑕疵说明等"></textarea>
                <div class="character-count"><span id="descCount">0</span>/500</div>
            </div>
        </div>
        
        <!-- 交易信息 -->
        <div class="publish-section">
            <h5 class="section-title">
                <i class="bi bi-geo-alt"></i> 交易信息
            </h5>
            
            <div class="mb-3">
                <label for="tradeLocation" class="form-label">交易地点</label>
                <input type="text" class="form-control" id="tradeLocation" placeholder="例如：图书馆东门咖啡厅">
                <div class="form-text">建议选择校内人流量大的地点</div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">交易方式</label>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="tradeFaceToFace" checked>
                    <label class="form-check-label" for="tradeFaceToFace">线下当面交易</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="tradeDelivery">
                    <label class="form-check-label" for="tradeDelivery">快递邮寄（需协商运费）</label>
                </div>
            </div>
        </div>
        
        <!-- 发布按钮 -->
        <div class="publish-section text-center">
            <button class="btn btn-primary-custom btn-lg" id="publishBtn">
                <i class="bi bi-check-circle me-2"></i>确认发布
            </button>
            <!-- <button class="btn btn-outline-secondary ms-3 btn-lg" id="saveDraftBtn">
                <i class="bi bi-file-earmark me-2"></i>保存草稿
            </button> -->
        </div>
    </div>

    <!-- Bootstrap & 图标库 -->
    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/publish.js"></script>
    <!-- 动态加载导航栏 -->
    <script>
    $(function(){
        $("#navbar-container").load("/components/navbar.html");
    });
    </script>
</body>
</html>